<template>
    <div class="requireRepairDetail" ref="requireRepairDetail">
        <div class="headerBreadcrumb">
            <header-breadcrumb :breadcrumbItem="breadcrumbItem"></header-breadcrumb>
        </div>
       <!-- 基本信息 -->
        <div  class="basicInformation">
            <el-row :gutter="10">
                <el-col :span="12" >
                    <div>
                        <div>
                            <div>
                                报修信息
                            </div>
                            <div v-for="(item,index) in listOfRequire" :key="index">
                                <span>{{item.label}}：</span><span v-if="item.label.indexOf('图片')==-1">{{item.value}}</span>
                                <div v-if="item.label.indexOf('图片')>-1">
                                    <img v-for="(ele,idx) in item.value" :key='idx' :src="ele.ri_url" alt="">
                                </div>
                            </div>

                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div>
                        <div>
                            <div>
                                维修信息
                            </div>
                            <div v-for="(item,index) in listOfRepaire" :key="index">
                                <span>{{item.label}}：</span><span  v-if="item.label.indexOf('图片')==-1">{{item.value}}</span>
                                <div v-if="item.label.indexOf('图片')>-1">
                                    <img v-for="(ele,idx) in item.value" :key='idx' :src="ele.ri_url" alt="">
                                </div>
                            </div>

                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>

/* eslint-disable */
import headerBreadcrumb from "@/components/headerBreadcrumb"
import {getRepairsInfoApiFn} from "./api"
export default {
    name: 'myAssetsDetails',
    components:{
        headerBreadcrumb,
    },
    data(){
        return{
            breadcrumbItem:[{name:'我的资产',replace:true,path:'/myAssets'},{name:'报修详情',class:true},], /**头部面包屑 */
            listOfRequire:[{label:'报修部门',value:''},{label:'报修人员',value:''},{label:'报修资产',value:''},{label:'报修原因',value:''},{label:'报修时间',value:''},{label:'报修图片',value:''}],
            listOfRepaire:[{label:'维修人员',value:''},{label:'维修部门',value:''},{label:'确认时间',value:''},{label:'完成时间',value:''},{label:'维修花费',value:''},{label:'维修备注',value:''},{label:'维修图片',value:''},],
        }
    },
    created(){
        this.getAssetsDetailsFn();
    },
    methods: {
        /**获取资产详情信息 */
        getAssetsDetailsFn(){
            getRepairsInfoApiFn({id:this.$route.query.key}).then(res=>{
                log(res)
                this.breadcrumbItem[0].name = res.f_name
                let arr = ['dept_name','repair_user_name','f_name','rp_reason','create_time','repair']
                let arr1 = ['guarantee_user_name','r_name','rp_confirm_time','rp_completion_time','rp_price','rp_remark','guarantee']
                arr.forEach((element,index) => {
                    this.listOfRequire[index].value = res[element]
                });
                arr1.forEach((element,index) => {
                    this.listOfRepaire[index].value = res[element]
                });
            })
        },
    }
}
</script>

<style lang="stylus" scoped>
.requireRepairDetail
    height 100%
    display flex
    flex-direction column
    color #1F1F21
    .basicInformation
        flex 1
        .el-row
            height 100%
        .el-col-12
            height 100%
            >div 
                height calc(100% - 70px)
                padding 35px 40px
                background-color #fff
                >div
                    border: 1px solid rgba(245, 245, 245, 1); 
                    height 100%
                    >div
                        padding-left 27px
                    >div:first-child 
                        line-height: 50px;
                        background-color: rgba(247, 247, 251, 1);
                        color: rgba(16, 16, 16, 1);
                        font-size: 16px;
                        text-align: left;
                    >div:not(:first-child)
                        display flex
                        margin-top 33px
                        font-size: 12px;
                        >span:first-child  
                            display inline-block
                            width 65px
                            font-size: 12px;
                            color: rgba(16, 16, 16, 1);
                        >span:last-child  
                            font-size: 12px;
                            color: rgba(96, 96, 96, 1);
                        >div 
                            img 
                                width: 101px;
                                height: 98px;
                                border-radius: 3px;
                                margin 0 10px 10px 0

</style>
